<html xmlns="http://www.w3.org/1999/xhtml">
<?php 
	if(!isset($_SESSION['userIdZing']))
	{
		session_start(); 
	}
	if(isset($_SESSION['userIdZing']))
	{
	?>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="./css/bootstrap.css" rel="stylesheet">

	<link href="./css/grid.css" rel="stylesheet">
	<link href="./css/carousel.css" rel="stylesheet">
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	
	<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type='text/javascript'> 
        var iCountStt = 5;
		function countChar(val) {
		var id_comment = val.id;
        var len = val.value.length;
        if (len >= 500) {
			val.value = val.value.substring(0, 500);
        } else {
			id_comment = id_comment.substring(7);
			var res = "charNum-";
			res = res.concat(id_comment);
			document.getElementById(res).innerHTML=(500-len);
        }
		val.style.height = '24px';
		val.style.height = val.scrollHeight + 0 + 'px';
      };
	</script>
	<title>ZiGo - Cùng chia sẻ</title>
</head>
<body>
<div id="zigo_container">
	<?php
		include ('/view/menutop.php');
		require_once 'server/db_connect.php';
		$db = new DB_CONNECT();
		//require_once ('view/webView.php');
		//require_once ('model/userModel.php');
		//require_once ('controller/subCommentController.php');
	?>
	<div class="row banneruser">
		<?php
			if(!isset($_GET['user_id_zing']))
			{
				$user = $_SESSION['userIdZing'];
				$avatar = $_SESSION['userAvatarZing'];
				$displayName = $_SESSION['userDisplayName'];
			}else{
				$me = $_SESSION['userIdZing'];
				$avatar_me = $_SESSION['userAvatarZing'];
				$displayName_me = $_SESSION['userDisplayName'];
				
				$user = $_GET['user_id_zing'];
				$query = 'SELECT user_id, user_avatar_zing, user_display_name FROM user WHERE user_id_zing ='.$user;
				$result = mysql_query($query) or die(mysql_error());
				if (mysql_num_rows($result) > 0) {
					while ($row = mysql_fetch_array($result)) {
						//$row['user_id'];
						$avatar_user = $row['user_avatar_zing'];
						$displayName_user = $row['user_display_name'];
					}
				}
				//$avatar = $_SESSION['userAvatarZing'];
				//$displayName = $_SESSION['userDisplayZing'];
			}
			$size = 60;
			//$arraySizeImg = getSizeImage($avatar_user);
			//$min = $arraySizeImg[0];
			//$width = $arraySizeImg[1];
			//$height =  $arraySizeImg[2];
			echo "<div style='float: left; width:".$size."px; height:".$size."px; overflow: hidden;'>";
			//if($height<$width){
				echo "<img src='".$avatar_user."' class='img-thumbnail' style='height:".$size."px; width:".$size."px;' alt='' />";
			//}else{
			//	echo "<img src='".$avatar_user."' class='img-thumbnail' style='width:".$size."px; height:".$size."px;' alt='' />";
			//}
			echo "</div>";  
			echo "<div class='col-sm-9 bordernone'>";
			echo "<h1 class='username' id='userid' >".$displayName_user."</h1>";
			echo "</div>";
		?>
	</div>
	<div class="row">
		<div class="col-sm-8">
			<div id="comments">
				<script type='text/template' id='comment-item'>
					<div class='left-comment'>
						<div style='float: left; width:80px; height:80px; overflow: hidden;' class='avatar'>
							<a href='./place.php?place_id=<%= place_id%>'>
								<img src='<%= url_avatar%><%= name_avatar%>' class='imgnewfeed' style='width:80px; height:80px; margin:0px;' alt='' />
							</a>
						</div>
					</div>
					<div class='right-comment'>
						<div class='comment-header'>
							<a href='./place.php?place_id=<%= place_id%>'>
								<h4><%= place_name%></h4>
							</a>
							<p class='address'><%= address%></p>
						</div>
						<div class='comment-detail'>
							<p><%= detail_comment%></p>
							<div id='sub-comment-<%=comment_id%>' class='sub-comment'>
								
							</div>
							<div class='post-comment'>
								<textarea id='txtcmt-<%=comment_id%>' onkeyup='countChar(this)' class='form-control ' rows='1' placeholder='Bình luận của bạn...' ></textarea>
								<div id='charNum-<%=comment_id%>' class='charnumber'>500</div>
								<button id='btn-<%=comment_id%>' onclick='insertSubComment(this)' type='button' class='btn btn-primary'>GỬI</button>
							</div>
						</div>
					</div>
					<script type='text/javascript'> getSubComment(<%= comment_id%>); </script>
				</script>
			</div>
			<div align="center" >
				<img id="loading" src="images/ajax_load.gif" alt="loading" style="visibility: hidden" />
                <button type='button' class='btn btn-primary' style="width: 520px;" onclick="loadMoreComment()">XEM THÊM</button>
                
			</div>
		</div>
	</div>
</div>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/holder.js"></script>
	<script type="text/javascript" src="js/underscore.min.js"></script>
	<script type="text/javascript" src="js/backbone.min.js"></script>
	<script type="text/javascript" src="js/model/newfeeduser.js"></script>
	<script type="text/javascript" src="js/user.js"></script>
<script type='text/javascript'> 
					var size = 80;
					var imgHeight;
					var imgWidth;
					
					function getImgSize(imgSrc)
					{
						var newImg = new Image();
						newImg.onload = function() {
							imgHeight = newImg.height;
							imgWidth = newImg.width;
							console.log("height:",imgHeight)
							
						}
						newImg.src = imgSrc;
					}
					function getPos(edge,min,size){
						return (edge - min)*size/(2*min);
					}
					function getCurrentDate() {
						var date = new Date();
						
						var str = date.getDate() + "/" + (date.getMonth()+1) + "/" + date.getFullYear() + " " +  date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
						return str;
					}
					function loadMoreComment(){
                        $('#loading').css('visibility','visible');
						$.ajax({
							type: "GET",
							url: "http://localhost/zigo/WebservicePHP/get_comment_from_user.php",
							data: {
								'user_id_zing':<?php echo $user; ?>,
								'state':'loadMore',
                                'sttComment': iCountStt
							},
							dataType: "json",
							success: function(data){
								if(parseInt(data)!=0){
									if(data.success == '1'){
										if (data.comment instanceof Array) {
										for (var i = 0; i<data.comment.length;i++){
											iCountStt++;
											var content = "";
											var url_image = data.comment[i].url_image;
											content = content.concat("<div class='user-comment' id='user-comment'>");
											content = content.concat("<div class='left-comment'>");
											content = content.concat("<div style='float: left; width:80px; height:80px; overflow: hidden;' class='avatar'>");
											content = content.concat("<img src='",data.comment[i].url_avatar,data.comment[i].name_avatar,"' class='imgnewfeed' style='height:80px; width:80px; margin: 0px;' alt='' />");	
											content = content.concat("</div>");
											content = content.concat("</div>");
											content = content.concat("<div class='right-comment'>");
											content = content.concat("<div class='comment-header'>");

											
											content = content.concat("<h4>",data.comment[i].place_name,"</h4>");
											content = content.concat("<p class='address'>",data.comment[i].address,"</p>");
											content = content.concat("</div>");
											content = content.concat("<div class='comment-detail'>");
											content = content.concat("<p>",data.comment[i].detail_comment,"</p>");
											//sub comment
											content = content.concat("<div id='sub-comment-",data.comment[i].comment_id,"' class='sub-comment'>");
											getSubComment(data.comment[i].comment_id);
											content = content.concat("</div>");
											//end subcomment
											content = content.concat("<div class='post-comment'>");
											content = content.concat("<textarea id='txtcmt-",data.comment[i].comment_id,"' onkeyup='countChar(this)' class='form-control ' rows='1' placeholder='Bình luận của bạn...' ></textarea>");
											content = content.concat("<div id='charNum-",data.comment[i].comment_id,"' class='charnumber'>500</div>");
											content = content.concat("<button id='btn-",data.comment[i].comment_id,"' onclick='insertSubComment(this)' type='button' class='btn btn-primary'>GỬI</button>");
											content = content.concat("</div>");
											content = content.concat("</div>");
                                            content = content.concat("</div>");
											content = content.concat("</div>");
											$('#comments').append(content);
											<!--console.log(content);-->
											}
										<!--console.log(data.comment);-->
										reSizeHeigh();
										}
									}
									$('#loading').css('visibility','hidden');
								}else{
									alert("fail success");
								}
							},
							error:function(data){
								alert("fail");
							}
						});
					}
					function insertSubComment(btn){
						var btnId = btn.id;
						var part = btnId.split("-");
						var charNumId = "charNum-" + part[1];
						var txtcmtId = "txtcmt-" + part[1];
						var charNum = document.getElementById(charNumId).innerHTML;
						console.log();
						var dataObject = { comment_id: part[1],
										   user_id_zing:  <?php echo $me; ?>,
										   description: document.getElementById(txtcmtId).value};
						console.log(dataObject);
						if(charNum<500){
							$.ajax({
								type: "POST",
								url: "http://localhost/zigo/WebservicePHP/insert_sub_comment.php",
								data: dataObject,
								dataType: 'json',
								success: function(data){
									if(parseInt(data)!=0){
										if(data.success == '1'){
											document.getElementById(txtcmtId).value = "";
											document.getElementById(charNumId).innerHTML = 500;
											console.log(data.message);
											var content= "";	
											content = content.concat("<div id='sub-item-",data.sub_comment_id,"' class='sub-item'>");
											content = content.concat("<a title=",'<?php echo $displayName_me;?>'," data-user-id='",<?php echo $me;?>,"' href='?user_id=",<?php echo $me;?>,"' class='imgnewfeed avatar-sub-cm'>");
											content = content.concat("<img src='",'<?php echo $avatar_me;?>',"' alt='",'<?php echo $displayName_me;?>',"'>");
											content = content.concat("</a>");
											content = content.concat("<span class='head-sub-cm'>");
											content = content.concat("<a data-user-id='",<?php echo $me;?>,"' href='?user_id=",<?php echo $me;?>,"' class='display-name'>",'<?php echo $displayName_me;?>',"</a>  ",getCurrentDate());
											content = content.concat("</span>");
											content = content.concat("<div class='content-sub-cm'>");
											content = content.concat(dataObject['description']);
											content = content.concat("</div>");
											content = content.concat("</div>");
											var subcm = "#sub-comment-"+part[1];
											$(subcm).append(content);
											
											console.log('<?php echo $displayName_me; ?>');
											console.log('<?php echo $avatar_me;?>');
										}else{
										console.log(data.message);
										}
										reSizeHeigh();
									}
								},
								error:function(data){
									console.log("fail");
								}
							});
						}
						console.log("char number:",charNum);
					}
					function getSubComment(cmId){
						var content = "";
						
						$.ajax({
								type: "GET",
								url: "http://localhost/zigo/WebservicePHP/get_sub_comment_from_commentid.php",
								data: {
									'comment_id':cmId
								},
								dataType: 'json',
								success: function(data){
									if(parseInt(data)!=0){
										if(data.success == '1'){
											
											if (data.subcomment instanceof Array) {
												var tempArray = data.subcomment.reverse();
												if(tempArray.length > 2){
													for (var i = 1; i<tempArray.length; i++){
													//sub comment
															//$dateSubCm = date_create($keySubCm->time_sub_comment);
															
															content = content.concat("<div id='sub-item-",data.subcomment[i].sub_commment_id,"' class='sub-item'>");
																content = content.concat("<a title='",data.subcomment[i].user_display_zing,"' data-user-id='",data.subcomment[i].user_id_zing,"' href='?user_id_zing=",data.subcomment[i].user_id_zing,"' class='imgnewfeed avatar-sub-cm'>");
																	content = content.concat("<img src='",data.subcomment[i].user_avatar_zing,"' alt='",data.subcomment[i].user_display_zing,"'>");
																content = content.concat("</a>");
																content = content.concat("<span class='head-sub-cm'>");
																	content = content.concat("<a data-user-id='",data.subcomment[i].user_id_zing,"' href='?user_id_zing=",data.subcomment[i].user_id_zing,"' class='display-name'>",data.subcomment[i].user_display_zing,"</a>  ",data.subcomment[i].time_sub_comment);
																content = content.concat("</span>");
																content = content.concat("<div class='content-sub-cm'>");
																	content = content.concat(data.subcomment[i].description);
																content = content.concat("</div>");
															content = content.concat("</div>");
													
													}
													var tempcontent = content;
													content = "";
													content = content.concat("<a id='more-sub-",cmId,"' href='#' onclick='getAllSubComment(this)'> Xem thêm bình luận</a>");
													content = content.concat(tempcontent);
												}else{
													for (var i = 0; i<tempArray.length; i++){
													//sub comment
															//$dateSubCm = date_create($keySubCm->time_sub_comment);
															
															content = content.concat("<div id='sub-item-",data.subcomment[i].sub_commment_id,"' class='sub-item'>");
																content = content.concat("<a title='",data.subcomment[i].user_display_zing,"' data-user-id='",data.subcomment[i].user_id_zing,"' href='?user_id_zing=",data.subcomment[i].user_id_zing,"' class='imgnewfeed avatar-sub-cm'>");
																	content = content.concat("<img src='",data.subcomment[i].user_avatar_zing,"' alt='",data.subcomment[i].user_display_zing,"'>");
																content = content.concat("</a>");
																content = content.concat("<span class='head-sub-cm'>");
																	content = content.concat("<a data-user-id='",data.subcomment[i].user_id_zing,"' href='?user_id_zing=",data.subcomment[i].user_id_zing,"' class='display-name'>",data.subcomment[i].user_display_zing,"</a>  ",data.subcomment[i].time_sub_comment);
																content = content.concat("</span>");
																content = content.concat("<div class='content-sub-cm'>");
																	content = content.concat(data.subcomment[i].description);
																content = content.concat("</div>");
															content = content.concat("</div>");
													
													}
												}
											}
										}else{
										}
										
									}
									var subcm = "#sub-comment-"+cmId;
									$(subcm).append(content);
									reSizeHeigh();
									console.log(content);
									console.log(2);
								},
								error:function(data){
									console.log("fail");
								}
							});
					}
					function getAllSubComment(btn){
						var btnId = btn.id;
						var part = btnId.split("-");
						var cmId = part[2];
						var content = "";
						
						$.ajax({
								type: "GET",
								url: "http://localhost/zigo/WebservicePHP/get_sub_comment_from_commentid.php",
								data: {
									'comment_id':cmId,
									'loadMore': 1
								},
								dataType: 'json',
								success: function(data){
									if(parseInt(data)!=0){
										if(data.success == '1'){
											
											if (data.subcomment instanceof Array) {
												var tempArray = data.subcomment.reverse();
												for (var i = 0; i<tempArray.length; i++){
													//sub comment
															//$dateSubCm = date_create($keySubCm->time_sub_comment);
															
															content = content.concat("<div id='sub-item-",data.subcomment[i].sub_commment_id,"' class='sub-item'>");
																content = content.concat("<a title='",data.subcomment[i].user_display_zing,"' data-user-id='",data.subcomment[i].user_id_zing,"' href='?user_id_zing=",data.subcomment[i].user_id_zing,"' class='imgnewfeed avatar-sub-cm'>");
																	content = content.concat("<img src='",data.subcomment[i].user_avatar_zing,"' alt='",data.subcomment[i].user_display_zing,"'>");
																content = content.concat("</a>");
																content = content.concat("<span class='head-sub-cm'>");
																	content = content.concat("<a data-user-id='",data.subcomment[i].user_id_zing,"' href='?user_id_zing=",data.subcomment[i].user_id_zing,"' class='display-name'>",data.subcomment[i].user_display_zing,"</a>  ",data.subcomment[i].time_sub_comment);
																content = content.concat("</span>");
																content = content.concat("<div class='content-sub-cm'>");
																	content = content.concat(data.subcomment[i].description);
																content = content.concat("</div>");
															content = content.concat("</div>");
													
												}
												
											}
										}else{
										}
										
									}
									var subcm = "#sub-comment-"+cmId;
									$(subcm).html(content);
									reSizeHeigh();
								},
								error:function(data){
									console.log("fail");
								}
							});
					}
				</script>
</body>
<?php }?>
</html>